<template>
  <div class="header">
      <div class="logo">
        <img src="./dhl-logo.png" alt="">
        <h1 class="huadi-name">HDL华为仓库管理系统</h1>
      </div>
    <div class="loginout">
      <span class="user-name" v-text="username"></span>
      <a href="/user/signOut">
        <img src="./loginout.png" class="loginout-img" alt="">
        <a class="loginout-text">退出登录</a>
      </a>
      <img src="./threePoint.png" class="threePoint" alt="">
    </div>
  </div>
</template>
<script>
    export default {
        name: 'Header',
        data () {
            return {
                msg: '',
                username:""
            }
        },
      created(){
          this.$http.get('/Hd-NurseryShool/login/userInfo').then(response=>{
            console.log(response.body);
                if(null!==response.body.username||undefined!==response.body.username){
                    this.username=response.body.username;
                }else{
                  window.location.href="/Hd-NurseryShool/"
                };
          });
      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .header{
    width:100%;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .loginout-text{
    font-size:16px;
    color:white;
    vertical-align: middle;
    margin-left:10px;
  }
  .loginout-img{
    vertical-align: middle;
    color:white;
    margin-left:50px;
  }
  .threePoint{
    margin-left:50px;
    vertical-align: middle;
    line-height:0px;
  }
  .user-name{
    font-size:16px;
    color:white;
    vertical-align: middle;
    line-height:0px;
  }
  .logo{
    margin-left:31px;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .logo >img{
    width:43px;
    height:38px;
  }
  .huadi-name{
    color:white;
    font-size:24px;
    margin-left:15px;
  }

</style>
